<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        {{msg}}
        <h2>count:{{count}}</h2>
        <button v-on:click="changeCount">点击+</button>
        <button @click="changeCount2">点击-</button>
    </div>
</body>
</html>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: '事件绑定',
            count: 0
        },
        //方法
        methods:{
            //点击count-1
            changeCount2(){
                // alert('点击了')
                //this为当前vue实列对象
                if(this.count <= 0){
                    alert('不能再减了')
                    this.count = 0;
                }else{
                    this.count--;
                }
            },
            //点击count+1
            changeCount:function(){
                // alert(this.count)
                //this为当前vue实列对象
                this.count++;
            }
        }
    })
</script>